<template>
	<view class="wrapper" :style="{padding:`calc(90rpx + ${safeTop}px) 0 150rpx`}">
		<div class="header posf bfff" :style="{padding:`calc(15rpx + ${safeTop}px) 25rpx 25rpx`}">
			<div class="flex-start title">
				<u-icon name="arrow-left" color="#333333" size="26" @click="back(1)"></u-icon>
				<div class="f32 fbold ml20">订单详情</div>
			</div>

		</div>
		<!-- 待付款 -->
		<!-- <div class="bfff top">
			<div class="flex-start ml50 mb30 ">
				<image src="../../static/shouye/pay-icon.png" mode="heightFix" class="t-icon"></image>
				<div class="f36 ctheme fbold ml10">待支付</div>
			</div>
		</div> -->
		<!-- 待使用 -->
		<div class="bfff top">
			<div class="flex-start ml50 ">
				<image src="../../static/shouye/use-icon.png" mode="heightFix" class="t-icon"></image>
				<div class="f36 fbold ml10">{{getstate(list.state)}}</div>
			</div>
		</div>
		<!-- 待付款 -->
		<div class="box1 bfff">
			<div class="center goods" v-for="(v,i) in list.goodsList" :key="i">
				<image :src="v.goodsImg" mode="aspectFill" class="logo-icon mr30"></image>
				<div class="flex1">
					<div class="f32 fbold nowrap mb30">{{v.goodsName}}</div>
					<div class="flex-start nosupported">
						<image src="../../static/shouye/ban.png" mode="aspectFill" class="ban-icon mr10"></image>
						<div class="f24">不支持退款</div>
					</div>
					<div class="f24 mt30 mb15">充值账号：{{v.account || '--'}}</div>
					<div class="space-between">
						<div class="f24">¥{{v.price}} / 单价 </div>
						
						<div class="f32 fbold">{{v.amount}}积分</div>
					</div>
				</div>
			</div>
		</div>
		<!-- <div class="box2 bfff">
			<div class="f26 fbold mb20 ml20">温馨提示</div>
			<div class="show-box mb30">
				<div class="center mb20 ml20">
					<div class="f24 text1">有效期：</div>
					<div class="flex1 f20">2028-02-28 23:59 到期</div>
				</div>
				<div class="center  ml20">
					<div class="f24 text1">使用规则：</div>
					<div class="flex1 f20">不支持退款，详情请咨询商家</div>
				</div>
			</div>
			<div class="center">
				<div class="f24 mr15">查看更多</div>
				<u-icon name="arrow-down" color="#B2B3B3" size="15"></u-icon>
			</div>
		</div> -->
		<div class="box3 bfff">
			<div class="f32 fbold mb40">订单信息</div>
			<div class="center mb20 ">
				<div class="f24 text2">订单号：</div>
				<div class="flex1 f20">{{list.orderNo}}</div>
			</div>
			<!-- <div class="center mb20 ">
				<div class="f24 text2">联系方式：</div>
				<div class="flex1 f20">不支持退款，详情请咨询商家</div>
			</div> -->
			<!-- <div class="center mb20 ">
				<div class="f24 text2">付款时间：</div>
				<div class="flex1 f20">2024-01-28 21:10:19</div>
			</div> -->
			<div class="center mb20 ">
				<div class="f24 text2">下单时间：</div>
				<div class="flex1 f20">{{list.createTime || '--'}}</div>
			</div>
			<div class="center mb20 ">
				<div class="f24 text2">数量：</div>
				<div class="flex1 f20">{{list.goodsList.length}}</div>
			</div>
			<div class="center mb20 ">
				<div class="f24 text2">总价：</div>
				<div class="flex1 f20">{{list.totalAmount}}积分</div>
			</div>
			<div class="center mb20 ">
				<div class="f24 text2">实付：</div>
				<div class="flex1 f20">{{list.payAmount}}积分</div>
			</div>
		</div>
		<div class="bfff box3" v-for="o in list.goodsList" v-if="list.goodsList[0].dzqList.length>0">
			<div class="f32 fbold mb40">券码信息</div>
			<div v-for="v in o.dzqList">
				<div class="center mb20 " v-if="v.type=='url'">
					<div class="f24 text2">使用链接：</div>
					<div class="flex1 f20">{{v.codePwd || '--'}}</div>
				</div>
				<div v-else>
					<div class="center mb20 ">
						<div class="f24 text2">卡号：</div>
						<div class="flex1 f20">{{v.code || '--'}}</div>
					</div>
					<div class="center mb20 ">
						<div class="f24 text2">卡密：</div>
						<div class="flex1 f20">{{v.codePwd || '--'}}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="bfff exchange space-between posf">
			<div class="ctheme ml40 f22"><span class="fbold f40">{{list.payAmount}}</span>积分</div>
			<div class="cfff center btn-pay mr40" v-if="list.state==0" @click="gocancel()">取消订单</div>
			<!-- <div class="cfff center btn-pay mr40" v-if="list.state==0">付款</div> -->
			<div class="cfff center btn-pay mr40" v-if="list.state==1" @click="applyRefund()">申请退款</div>
			<div class="cfff center btn-pay mr40" v-if="list.state>=5" @click="godelete()">删除订单</div>
			<!-- <div class="f24 btn-again center mr35">再来一单</div> -->
		</div>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		getCurrentInstance
	} from 'vue'
	const orderNo = ref('')
	onLoad((e) => {
		orderNo.value = e.orderNo

	})
	const {
		proxy
	} = getCurrentInstance()
	const list = ref({
		goodsList: []
	})
	const getorderview = () => {
		proxy.$http('/api/mall/order/view', {
			phone: uni.getStorageSync('uInfo').phone,
			orderNo: orderNo.value
		}).then((r) => {
			console.log(r)
			list.value = r.data
		})
	}

	// 取消订单
	const gocancel = () => {
		uni.showModal({
			title: '确认取消订单吗?',
			success: res => {
				if (res.confirm) {
					proxy.$http('/api/mall/order/cancel', {
						phone: uni.getStorageSync('uInfo').phone,
						orderNo: orderNo.value
					}, true, 'POST').then((r) => {
						uni.showToast({
							title: '订单已取消'
						})
						list.value.state = 6
					})
				}
			}
		})
	}
	// 删除订单
	const godelete = () => {
		uni.showModal({
			title: '确认删除订单吗?',
			success: res => {
				if (res.confirm) {
					proxy.$http('/api/mall/order/delete', {
						phone: uni.getStorageSync('uInfo').phone,
						orderNo: orderNo.value
					}, true, 'POST').then((r) => {
						uni.showToast({
							title: '订单已删除'
						})
						uni.navigateBack()
					})
				}
			}
		})
	}
	// 申请退款
	const applyRefund = () => {
		uni.showModal({
			title: '请输入退款原因',
			editable: true,
			placeholderText: '请输入',
			success: res => {
				console.log(res)
				if (res.confirm) {
					if (res.content == '') {
						uni.showToast({
							title: '请输入退款原因',
							icon: 'none'
						})
						return
					}
					proxy.$http('/api/mall/order/applyRefund', {
						phone: uni.getStorageSync('uInfo').phone,
						orderNo: orderNo.value,
						tkyy: res.content
					}, true, 'POST').then((r) => {
						uni.showToast({
							title: '退款成功！'
						})
						list.value.state = 4
					})
				}

			}
		});
	}



	onMounted(() => {
		getorderview()
	})

	// 获取状态
	const getstate = (s) => {
		if (s == 1) {
			return '待发货'
		} else if (s == 2) {
			return '已发货'
		} else if (s == 4) {
			return '退款'
		} else if (s = 5) {
			return '售后'
		} else if (s = 6) {
			return '已取消'
		} else if (s = 7) {
			return '交易完成'
		} else if (s == 0) {
			return '待支付'
		} else {
			return '其他'
		}

	}
</script>

<style lang="scss" scoped>
	.exchange {
		height: 122rpx;
		width: 100%;
		left: 0;
		bottom: 0;
		border-top: 1rpx solid #A1A1A1;

		.btn-pay {
			background: linear-gradient(to right, #FF5623, #FF8900);
			height: 60rpx;
			width: 205rpx;
			border-radius: 45rpx;
		}

		.btn-again {
			width: 200rpx;
			height: 60rpx;
			border: 1rpx solid #A1A1A1;
			border-radius: 28rpx;

		}
	}

	.top {
		padding: 25rpx 0;
	}

	.box3 {
		width: 705rpx;
		margin: 0 auto 25rpx;
		border-radius: 13rpx;
		padding: 40rpx 35rpx 25rpx;

		.center {
			margin-bottom: 24rpx;
		}

		.text2 {
			width: 140rpx;
		}
	}

	.box2 {
		width: 705rpx;
		margin: 0 auto 25rpx;
		border-radius: 13rpx;
		padding: 40rpx 15rpx 45rpx;

		.text1 {
			width: 130rpx;
		}

		.show-box {
			padding-bottom: 35rpx;
			border-bottom: 1rpx solid #D9D9D9;
		}
	}

	.box1 {
		width: 705rpx;
		margin: 25rpx auto;
		border-radius: 13rpx;
		padding: 35rpx 35rpx 40rpx;

		.goods {
			.logo-icon {
				width: 195rpx;
				height: 195rpx;
				border: 1rpx solid #B4B4B4;
				border-radius: 15rpx;
			}

			.ban-icon {
				width: 28rpx;
				height: 28rpx;
			}
		}
	}


	.t-icon {
		width: 45rpx;
		height: 45rpx;
	}

	.header {
		width: 100%;
		top: 0;
		left: 0;
		border-radius: 0rpx 0rpx 13rpx 13rpx;



	}
</style>